<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  userData: {
    type: Object,
    required: true,
  },
  editable: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['edit'])

const handleEdit = () => {
  emit('edit')
}
</script>

<template>
  <view class="w-full h-auto bg-white relative">
    <view class="w-full h-auto mt-2relative">
      <view class="flex items-center justify-between">
        <view v-if="editable" class="flex m-2 items-center justify-center">
          <text
            class="icon-guanyuwomen w-4 h-4 text-blue-500 flex items-center justify-center rounded-full"
          ></text>
          <view class="pl-2">基础资料</view>
        </view>
        <navigator
          url="/pages/my-edit/edit-form/edit-form"
          open-type="navigate"
          hover-class="navigator-hover"
          v-if="editable"
          class="flex items-center mr-3 bg-gray-50 rounded-md px-3 py-1"
        >
          <text class="text-sm">编辑</text>
        </navigator>
      </view>
      <view class="w-11/12 h-6 rounded-full mt-4 mx-auto flex items-center justify-between">
        <view class="flex m-2 items-center space-x-2">
          <text
            class="icon-School w-2 h-2 text-blue-500 flex items-center justify-center rounded-full"
          />
          <view class="font-normal ml-1 text-xs">
            {{ userData.school ? userData.school : '' }}
          </view>

          <view class="font-normal ml-1 px-2 text-xs border-l-2">
            {{
              userData.education == 'Specialty'
                ? '专科'
                : userData.education == 'Undergraduate'
                ? '本科'
                : userData.education == 'Master'
                ? '硕士'
                : userData.education == 'Doctor'
                ? '博士'
                : ''
            }}
          </view>
        </view>
        <view class="font-normal mr-4 text-xs">
          {{
            userData.educationalType == 'FullTime'
              ? '全日制'
              : userData.education == 'NOFullTime'
              ? '非全日制'
              : ''
          }}
        </view>
      </view>
    </view>
    <!-- 昵称 -->
    <view class="ml-4 mt-2 text-lg bg-white font-bold flex items-center">
      <view class="name">{{ userData.nickName ? userData.nickName : '' }}</view>
      <text
        :class="
          userData.gender === 'FEMALE'
            ? 'icon-nv bg-pink-100 text-pink-500'
            : 'icon-nan bg-blue-100 text-blue-500'
        "
        class="w-4 h-4 m-1 p-1 flex items-center justify-center rounded-full"
      />
    </view>
    <!--  -->
    <view class="ml-4 mt-2 text-sm flex items-center">
      <view>
        {{ userData.age ? userData.age : '' }}岁 · {{ userData.height ? userData.height : '' }}cm ·
        {{ userData.constellation ? userData.constellation : '' }}
      </view>

      <view class="ml-4 px-2">{{ userData.city ? userData.city : '' }}</view>
    </view>
    <!-- 情感状态 -->
    <view v-if="userData.emotional" class="flex items-center mt-3 mb-3 ml-4">
      <text
        class="icon-xunmi- w-4 h-4 text-blue-500 flex items-center justify-center rounded-full"
      />
      <view class="ml-3 font-normal text-xs">
        {{ userData.emotional }}
      </view>
    </view>
    <!-- 分割线 -->
    <view class="w-full h-[2rpx] mx-auto dotted-line items-center justify-center relative">
      <view
        class="bg-[#f5f6fa] w-[44rpx] h-[44rpx] rounded-full absolute left-[-22rpx] top-[-22rpx]"
      ></view>
      <view
        class="bg-[#f5f6fa] w-[44rpx] h-[44rpx] rounded-full absolute right-[-22rpx] top-[-22rpx]"
      ></view>
    </view>

    <view class="flex flex-wrap gap-2 items-center font-normal text-xs mt-4 px-4 mb-4">
      <view class="bg-[#e5f4ff] px-2 py-1 flex items-center rounded-full">
        职业：{{ userData.profession ? userData.profession : '' }}
      </view>
      <view
        v-if="userData.annualSalary"
        class="bg-[#ffe3de] px-2 py-1 flex items-center rounded-full"
      >
        年薪：{{ userData.annualSalary }}
      </view>
      <view v-if="userData.marriage" class="bg-[#f2e8f9] px-2 py-1 flex items-center rounded-full">
        婚姻状况：{{ userData.marriage }}
      </view>
    </view>
  </view>
</template>
<style>
.dotted-line {
  background-image: repeating-linear-gradient(
    to right,
    #d1d5db 0px,
    #d1d5db 6rpx,
    transparent 6rpx,
    transparent 16rpx
  );
}
</style>
